<template>
  <div class="detail-content">
    <div class="bg-1">
      <div class="max-width breadcrumb">
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>detail</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="max-width detail-h1">
        <el-badge value="test" class="item">
          <h1>{{ data.title }}</h1>
        </el-badge>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ArrowRight, Search } from "@element-plus/icons-vue";

const data = reactive({});
data.title = "详情页";

const imgurl = ref("");
const table = [1, 2, 3];

const download = function () {};
</script>
<style lang="scss" scoped>
.detail-content {
  height: 100%;
  width: 100%;
  background-color: #fff;
}

.bg-1 {
  width: 100%;
  height: 100%;
  background-color: #fafafa;
  padding: 30px 0;
}

.breadcrumb {
  ::v-deep(.el-breadcrumb) {
    .el-breadcrumb__item .el-breadcrumb__inner {
      color: #999;
    }
    .el-breadcrumb__item:last-of-type .el-breadcrumb__inner {
      color: #333;
    }
  }
}

.detail-h1 {
  margin-top: 40px;
  ::v-deep(.el-badge) h1 {
    font-size: 36px;
    height: 36px;
    width: auto;
    color: #181818;
    letter-spacing: 0;
    line-height: 36px;
    margin-top: 0px;
    font-weight: 400;
    display: inline-block;
  }
}
</style>